<template>
  <NSpin :show="loading">
    <n-list hoverable clickable>
      <n-list-item
        @click="goToEdit(item)"
        v-for="(item, index) in list.list"
        :key="item.post_id"
      >
        <div class="itemContainer">
          <NImage
            width="166"
            height="166"
            style="margin-right: 16px; border-radius: 12px"
            object-fit="cover"
            :src="downloadFile(item.cover)"
          ></NImage>
          <n-thing :title="item.title" content-style="margin-top: 10px;">
            <template #description>
              <n-space size="small" style="margin-top: 4px">
                <n-tag
                  :bordered="false"
                  :type="item.status === '1' ? `info` : `warning`"
                  size="large"
                >
                  {{ item.status === "1" ? "已发布" : "草稿" }}
                </n-tag>
                <NTag size="large" type="primary">
                  {{ item.community.community_name }}
                </NTag>
              </n-space>
              <p>{{ item.description }}</p>
              <div></div>
            </template>
          </n-thing>
        </div>
      </n-list-item>
    </n-list>
    <NPagination
      v-model:page="filterParams.page_number"
      :page-count="Math.floor(list.total / list.currentPageSize)"
    />
  </NSpin>
</template>
<script setup lang="ts">
import {
  NImage,
  NList,
  NListItem,
  NThing,
  NTag,
  NSpin,
  NPagination,
} from "naive-ui";
import { ref, reactive, watch } from "vue";
import { fetchGetPostList } from "~/api/post";
import { downloadFile } from "~/api/file";
import { IPostListParams, PostListResult, PostList } from "~/api/post/types";
import { useRouter } from "vue-router";
const router = useRouter();
const loading = ref<boolean>(false);

const goToEdit = (item: PostList) => {
  console.log(item.post_id);
  router.push({
    path: `/user/editPublish/${item.post_id}`,
  });
};
const filterParams = reactive<IPostListParams>({
  page_number: 1,
  page_size: 10,
  sort: "create_time",
  sort_mode: "desc",
  title: "",
});
watch(filterParams, (o, n) => {
  getList();
});
const list = ref<PostListResult>({
  list: [],
  total: 0,
  currentPage: 1,
  currentPageSize: 10,
});
const getList = () => {
  loading.value = true;
  fetchGetPostList(filterParams)
    .then((r) => {
      list.value = r.result;
    })
    .finally(() => {
      loading.value = false;
    });
};

getList();
</script>
<style lang="scss" scoped>
.n-list {
  background: transparent;
}
.itemContainer {
  display: flex;
  align-items: center;
}
</style>
